<template>
  <view class="points-page">
    <!-- 头部积分概览 -->
    <view class="points-header">
      <view class="total-points">
        <text class="label">当前积分</text>
        <text class="value">1,280</text>
      </view>
      <view class="points-actions">
        <button class="action-btn" @click="navigateToExchange">积分兑换</button>
        <button class="action-btn" @click="navigateToRules">积分规则</button>
      </view>
    </view>

    <!-- 积分明细列表 -->
    <view class="points-list">
      <view class="list-header">
        <text class="title">积分明细</text>
        <picker mode="date" fields="month" @change="handleMonthChange">
          <view class="date-picker">
            <text>{{ currentDate }}</text>
            <uni-icons type="arrow-down" size="16" color="#666"></uni-icons>
          </view>
        </picker>
      </view>

      <scroll-view scroll-y class="list-content" @scrolltolower="loadMore">
        <PointsItem 
          v-for="(item, index) in pointsList" 
          :key="index" 
          :item="item"
        />
        
        <view class="loading-text" v-if="loading">
          <text>加载中...</text>
        </view>
        <view class="no-more" v-if="noMore">
          <text>没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import PointsItem from './components/PointsItem.vue';

// 当前选择的日期
const currentDate = ref('2023年11月');
const pointsList = ref([]);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);

// 模拟获取积分明细数据
const fetchPointsList = async () => {
  loading.value = true;
  // 模拟API请求
  setTimeout(() => {
    const mockData = [
      {
        id: 1,
        title: '购物获得积分',
        type: 'add',
        points: '+100',
        time: '2023-11-15 14:30',
        desc: '订单号: 202311151430001'
      },
      {
        id: 2,
        title: '积分兑换商品',
        type: 'minus',
        points: '-50',
        time: '2023-11-10 09:15',
        desc: '兑换: 精美礼品'
      },
      // 更多模拟数据...
    ];
    
    if (page.value === 1) {
      pointsList.value = mockData;
    } else {
      pointsList.value = [...pointsList.value, ...mockData];
    }
    
    loading.value = false;
    noMore.value = page.value >= 3; // 模拟没有更多数据
  }, 800);
};

// 月份变化处理
const handleMonthChange = (e) => {
  const date = new Date(e.detail.value);
  currentDate.value = `${date.getFullYear()}年${date.getMonth() + 1}月`;
  page.value = 1;
  fetchPointsList();
};

// 加载更多
const loadMore = () => {
  if (loading.value || noMore.value) return;
  page.value += 1;
  fetchPointsList();
};

// 导航到积分兑换
const navigateToExchange = () => {
  uni.navigateTo({
    url: '/pages/exchange/index'
  });
};

// 导航到积分规则
const navigateToRules = () => {
  uni.navigateTo({
    url: '/pages/points/rules'
  });
};

onMounted(() => {
  fetchPointsList();
});
</script>

<style lang="scss" scoped>
.points-page {
  min-height: 100vh;
  background-color: $light-bg;
  
  .points-header {
    background: linear-gradient(135deg, $primary-color, $secondary-color);
    padding: 40rpx 30rpx;
    color: $text-color-inverse;
    
    .total-points {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40rpx;
      
      .label {
        font-size: $font-size-28rpx;
        margin-bottom: 10rpx;
      }
      
      .value {
        font-size: $font-size-40rpx;
        font-weight: bold;
      }
    }
    
    .points-actions {
      display: flex;
      justify-content: space-around;
      
      .action-btn {
        background-color: rgba(255, 255, 255, 0.2);
        color: $text-color-inverse;
        border: none;
        border-radius: 50rpx;
        padding: 12rpx 40rpx;
        font-size: $font-size-26rpx;
        
        &:after {
          border: none;
        }
      }
    }
  }
  
  .points-list {
    background-color: $white-bg;
    border-radius: 20rpx 20rpx 0 0;
    margin-top: -20rpx;
    padding: 30rpx;
    
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .title {
        font-size: $font-size-32rpx;
        font-weight: bold;
        color: $text-color;
      }
      
      .date-picker {
        display: flex;
        align-items: center;
        font-size: $font-size-26rpx;
        color: $text-color-666;
        
        text {
          margin-right: 10rpx;
        }
      }
    }
    
    .list-content {
      height: calc(100vh - 400rpx);
      
      .loading-text,
      .no-more {
        text-align: center;
        padding: 20rpx;
        font-size: $font-size-26rpx;
        color: $text-color-666;
      }
    }
  }
}
</style>